<template>
  <div>
    <TypeNav />
    <!--list-content-->
    <div class="main">
      <div class="py-container">
        <SearchTag
          :trademark="searchParams.trademark"
          :searchProps="searchParams.props"
          @deleteQueryTag="deleteQueryTag"
          @deleteParamsTag="deleteParamsTag"
          @deleteTrademark="deleteTrademark"
          @deleteAttr="deleteAttr"
        />
        <SearchSelector
          @trademarkParams="trademarkParams"
          @attrvalueParams="attrvalueParams"
        />
        <SearchDetails
          @searchListSort="searchListSort"
          :pageNo="searchParams.pageNo"
          @changePageNo="changePageNo"
        />
        <SearchHot />
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions } from "vuex";
import SearchTag from "./components/SearchTag";
import SearchSelector from "./components/SearchSelector";
import SearchDetails from "./components/SearchDetails";
import SearchHot from "./components/SearchHot";
export default {
  name: "Search",
  components: {
    SearchTag,
    SearchSelector,
    SearchDetails,
    SearchHot,
  },
  data() {
    return {
      searchParams: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
        keyword: "",
        order: "",
        pageNo: 1,
        pageSize: 10,
        props: [],
        trademark: "",
      },
    };
  },
  beforeMount() {
    this.initParams();
  },
  mounted() {
    this.getSearchList(this.searchParams);
  },
  methods: {
    ...mapActions("search", ["getSearchList"]),
    initParams() {
      const {
        categoryName = "",
        category1Id = "",
        category2Id = "",
        category3Id = "",
      } = this.$route.query;
      const { searchKey = "" } = this.$route.params;
      this.searchParams = {
        ...this.searchParams,
        categoryName,
        category1Id,
        category2Id,
        category3Id,
        keyword: searchKey,
      };
    },
    // 获取点击的值，并进行拼接显示至结果栏
    trademarkParams(tm) {
      // tm为品牌点击的传值
      // console.log(tm)
      // 获取值进行拼接显示至结果栏
      (this.searchParams.trademark = `${tm.tmId}:${tm.tmName}`),
        // 获取后重新发布请求
        this.getSearchList(this.searchParams);
    },
    // 接收属性点击传递值 自定义事件回调函数
    attrvalueParams(attr) {
      // console.log(attrValue)
      const { attrId, attrName, attrValue } = attr;
      const str = `${attrId}:${attrValue}:${attrName}`;
      if (this.searchParams.props.includes(str)) return;
      this.searchParams.props.push(`${attrId}:${attrValue}:${attrName}`);
      // 获取后重新发布请求
      this.getSearchList(this.searchParams);
    },
    // 删除querytag的函数
    deleteQueryTag() {
      this.searchParams = {
        ...this.searchParams,
        category1Id: "",
        category2Id: "",
        category3Id: "",
        categoryName: "",
      };
      const params = this.$route.params;
      this.$router.push({
        name: "search",
        params,
      });
    },
    // 删除paramsTag的函数
    deleteParamsTag() {
      this.searchParams = {
        ...this.searchParams,
        keyword: "",
      };
      const query = this.$route.query;

      //通知Header组件清空搜索框的值
      this.$bus.$emit("notifyHeader");
      // 重新发送请求
      this.$router.push({
        name: "search",
        query,
      });
    },
    // 删除品牌tag函数
    deleteTrademark() {
      //请求参数
      this.searchParams = {
        ...this.searchParams,
        trademark: "",
      };
      //重新发送请求
      this.getSearchList(this.searchParams);
    },
    // 删除属性的tag函数
    deleteAttr(tag) {
      //处理参数
      this.searchParams.props = this.searchParams.props.filter(
        (item) => tag != item
      );
      //重新发送请求
      this.getSearchList(this.searchParams);
    },
    // 自定义事件--排序
    searchListSort(order) {
      this.searchParams.order = order;
      this.getSearchList(this.searchParams);
    },
    changePageNo(page) {
      this.searchParams.pageNo = page;
      //重新发送请求
      this.getSearchList(this.searchParams);
    },
  },
  watch: {
    $route() {
      this.initParams();
      this.getSearchList(this.searchParams);
    },
  },
};
</script>

<style scoped lang="less">
.main {
  margin: 10px 0;
  .py-container {
    width: 1200px;
    margin: 0 auto;
  }
}
</style>
